<template>
  <div class="folder-details">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="文件夹名">{{ folderInfo?.name }}</el-descriptions-item>
      <el-descriptions-item label="路径">{{ folderInfo?.path }}</el-descriptions-item>
      <el-descriptions-item label="完整路径">{{ folderInfo?.full_path }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ folderInfo?.created_time }}</el-descriptions-item>
      <el-descriptions-item label="文件数量">{{ folderInfo?.file_count }}</el-descriptions-item>
      <el-descriptions-item label="文件夹数量">{{ folderInfo?.folder_count }}</el-descriptions-item>
      <el-descriptions-item label="总大小">{{ formatSize(folderInfo?.total_size) }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import type { FolderInfo } from '../../types'

defineProps<{
  folderInfo: FolderInfo | null
}>()

const formatSize = (size?: number) => {
  if (!size) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let index = 0
  let fileSize = size

  while (fileSize >= 1024 && index < units.length - 1) {
    fileSize /= 1024
    index++
  }

  return `${fileSize.toFixed(2)} ${units[index]}`
}
</script>

<style scoped lang="scss">
:deep(.el-descriptions__body) {
  background-color: #fff;
}

:deep(.el-descriptions__label) {
  width: 120px;
  font-weight: bold;
}
</style> 